<template>
    <div class="feedback_container">
      <!-- 返回按钮 -->
      <div class="feedback_nav">
        <img src="../../assets/images/jiantou_left.png" alt="" class="back-arrow" @click="goback">
        <div class="title">意见反馈</div>
      </div>
  
      <!-- 页面主体 -->
      <div class="feedback_body">
        <div class="module" @click="goToPage('independent')">
          <div class="module-title">
            <img src="../../assets/images/feedback.png" alt="Feedback" class="module-icon" />
                自助留言
          <img src="../../assets/images/fangxiang-you.png" alt="Right Arrow" class="arrow-icon" />
            </div>
        </div>
        
        <div class="module" @click="goToPage('history')">
          <div class="module-title">
            <img src="../../assets/images/history.png" alt="History" class="module-icon" />
            历史留言
            <img src="../../assets/images/fangxiang-you.png" alt="Right Arrow" class="arrow-icon" />
            </div>
        </div>
      </div>

      <div class="guess-you-want">
      <div class="section-title">猜你想问</div>
      <!-- 猜你想问模块 -->
      <div class="qa_section">
        <div v-for="(item, index) in faqs" :key="index" class="qa_item">
          <button @click="toggleFAQ(index)" class="qa_question">
            {{ item.question }}
            <img v-if="item.isOpen" src="../../assets/images/iconPark-up.png" alt="Down Arrow" class="arrow-icon" />
            <img v-else src="../../assets/images/iconPark-down.png" alt="Right Arrow" class="arrow-icon" />
          </button>
          <div v-if="item.isOpen" class="qa_answer">
            <p>{{ item.answer }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  // 返回个人中心
  const goback = () => {
    router.push('/mine');
  };
  
  // 页面跳转函数
  const goToPage = (page: string) => {
    if (page === 'independent') {
      router.push('/independent');
    } else if (page === 'history') {
      router.push('/history');
    }
  };

  
  // 常见问题数据
  const faqs = ref([
    {
      question: "我如何下单？",
      answer: "答：您可以在平台首页上点击【发布代取】，填写信息后点击‘下单’按钮，按照提示完成支付，即可完成下单。",
      isOpen: false,
    },
    {
      question: "我要如何换绑取/收货地址？",
      answer: "答：您可以进入个人中心，点击【地址设置】进入文档地址页面，进一步来更新您的地址。",
      isOpen: false,
    },
    {
      question: "我要如何换绑手机号？",
      answer: "答：您可以进入个人中心，点击【编辑个人信息】进入个人信息页面，点击联系方式来更新您的信息。",
      isOpen: false,
    },
    {
      question: "我的订单没有更新状态怎么办？",
      answer: "答：请确保网络正常连接，并尝试刷新页面。如果问题持续，请联系客服。",
      isOpen: false,
    }
  ]);
  
  // 切换折叠面板显示状态
  const toggleFAQ = (index: number) => {
    faqs.value[index].isOpen = !faqs.value[index].isOpen;
  };
  </script>
  
  <style lang="less" scoped>
  .feedback_container {
    font-family: Arial, sans-serif;
  }
  
  .feedback_nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 50px;
  }
  
  .back-arrow {
    position: absolute;
    left: 10px;
    width: 34px;
    height: 34px;
    margin-top: 10px;
  }
  
  .title {
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
  }
  
  .feedback_body {
    padding: 20px;
  }
  
  .module {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
  }
  
  .module-title {
    font-size: 20px;
    color: #333;
    height: auto;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
    justify-content: space-between;  
  }

.module-title .module-icon {
  width: 30px;
  height: 30px;
  margin-right: -180px;
}

.arrow-icon {
  width: 16px;
  height: 16px;
  margin-left: 10px;  
}

.guess-you-want {
  height: 600px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #FFFFFF;  
  border-radius: 8px;  
}

.section-title {
  width: 20%;
  border-radius: 8px;
  font-size: 18px;
  color: #E3759A;  
  background-color: #FFFFFF; 
  padding: 8px 15px; 
  border: 2px solid #E3759A;  
  text-align: center;  
  margin-bottom: 15px;  
}

  .qa_section {
    margin-top: 20px;
  }
  
  .qa_item {
    margin-bottom: 15px;
  }
  
  .qa_question {
  width: 100%;
  padding: 15px;
  background-color: #FFFFFF; /* 背景颜色设置为白色 */
  border: 1px solid #ddd;
  text-align: left;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 文字和箭头分别对齐 */
}

.qa_answer {
  padding: 10px;
  margin-top: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  border: 1px solid #ddd;
}
</style>